<template>
  <div style="height: 100%;width: 100%" @click="closeInfoWindow">
    <div class="map-container" id="container" style="height: 100%;width: 100%"></div>
    <div v-show="flash" ref="infoData" style="margin:0 0;width: 250px"
         class="custom-info input-card content-window-card">
      <div>
        <div>
          <img :src="devInfo.icon" style="height: 150px;width: 100%">
        </div>
        <div style="display: flex">
          <div style="margin: 10px;font-size: 16px;color: #ed5565">{{devInfo.title}}</div>
          <div style="margin: 14px;font-size: 8px;color: #000000">天空里10楼办公室</div>
        </div>
        <div style="margin:0 10px;font-size: 16px;color: #000000">
           {{devInfo.mianji}}
        </div>
      </div>
      <div class="info-bottom"
           style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png">
      </div>
    </div>
    <!-- <div class="info">
      点击地图上的点标记，打开所添加的自定义信息窗体
    </div> -->
  </div>
</template>
<script>
import { communityList } from '@/network/request.js'
export default {
  data () {
    return {
      flash: false,
      devInfo: {
        title: '',
        icon: '',
        state: '',
        address: '',
        electricity: '',
        gas: '',
        guan: '',
        water: '',
        years: '',
        time: '',
        mianji: ''
      },
      map: null,
      markerData: []
    }
  },
  mounted () {
    this.getMarkerListFn()
    // this.createMap()
    // this.map.clearMap()
    // this.addMarker()
    // this.closeInfoWindow()
  },
  created () {},
  methods: {
    getMarkerListFn () {
      communityList().then(res => {
        if (res.code === 200) {
          this.markerData = res.data.filter(n => n.latitude && n.longitude).map((n, i) => {
            return {
              title: n.siteName,
              icon: n.icon,
              state: n.siteName,
              text: '',
              siteId: n.siteId,
              position: [n.longitude, n.latitude],
              offset: new AMap.Pixel(-12, -30)
            }
          })
        }
      }).finally(() => {
        this.createMap()
        this.addMarker()
      })
    },
    // 1.创建map对象
    createMap () {
      // 1.地图初始化时，在地图上添加marker标记,鼠标点击marker可弹出自定义的信息窗体
      // var mapData = new AMap.Map('container', {
      //   // dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
      //   // doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
      //   resizeEnable: true,
      //   center: [113.8738, 27.6323], // 地图中心点位置
      //   zoom: 13,
      //   mapStyle: 'amap://styles/darkblue'
      // })
      const district = new AMap.DistrictSearch({ subdistrict: 1, extensions: 'all', level: 'district' })
      district.search('安源区', (status, result) => {
        // 查询成功时，result即为对应的行政区信息
        console.log(status, 222) // 这里是整个萍乡市的边界经纬度
        const bounds = result.districtList[0].boundaries
        const mask = []
        for (let i = 0; i < bounds.length; i++) {
          mask.push([bounds[i]])
        }
        const map = new AMap.Map('container', { // 设置地图容器id
          layers: [
            // 卫星
            new AMap.TileLayer.Satellite(),
            // 路网
            new AMap.TileLayer.RoadNet()
          ],
          // mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
          zoom: 12, // 设置当前显示级别
          expandZoomRange: true, // 开启显示范围设置
          zooms: [7, 20], // 最小显示级别为7，最大显示级别为20
          center: [113.8738, 27.6323], // 设置地图中心点位置
          viewMode: '3D', // 特别注意,设置为3D则其他地区不显示
          zoomEnable: true, // 是否可以缩放地图
          resizeEnable: true,
          mapStyle: 'amap://styles/darkblue'
          /* mapStyle(地图的显示样式) 可以不写，默认是amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86
          目前支持两种地图样式： 第一种：自定义地图样式，如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
          可前往地图自定义平台定制自己的个性地图样式； 第二种：官方样式模版,如"amap://styles/grey"。 其他模版样式及自定义地图的使用说明见开发指南 */
          // mapStyle: "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
          // mapStyle: "amap://styles/grey"
          // mapStyle: "amap://styles/light"
        })
        // 添加描边
        for (let i = 0; i < bounds.length; i++) {
          const polyline = new AMap.Polyline({
            path: bounds[i], // polyline 路径，支持 lineString 和 MultiLineString
            strokeColor: '#00BAFF', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
            strokeWeight: 4 // 轮廓线宽度,默认为:2
            // map:map // 这种方式相当于: polyline.setMap(map);
          })
          polyline.setMap(map)
        }
        const arr = []
        const icon = new AMap.Icon({
          size: new AMap.Size(72, 72), // 图标尺寸
          image: '/images/dw.png', // Icon的图像
          imageSize: new AMap.Size(62, 50), // 根据所设置的大小拉伸或压缩图片
          imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
        })
        this.markerData.forEach((item) => {
          const marker = new AMap.Marker({ // 图标尺寸
            icon: icon, // 点标记图片路径
            position: item.position, // 位置
            topWhenClick: true,
            zIndex: 99999
            // offset: item.offset // 偏移
          })
          arr.push(
            Object.assign(item, {
              mapId: marker._amap_id
            })
          )
          marker.setLabel({
            direction: 'bottom',
            offset: new AMap.Pixel(0, 0), // 设置文本标注偏移量
            content: `<div class="marker_label1">${item.title}</div>` // 设置文本标注内容
          })
          marker.setMap(map)
          AMap.event.addListener(marker, 'click', (e) => {
            console.log('12331321')
            this.markerClick(arr, marker)
          })
        })
        this.map = map
      })
      console.log()
    },
    // 2.添加点标记
    addMarker () {
      const self = this

      const arr = []
      const icon = new AMap.Icon({
        size: new AMap.Size(72, 72), // 图标尺寸
        image: '/images/dw.png', // Icon的图像
        imageSize: new AMap.Size(62, 50), // 根据所设置的大小拉伸或压缩图片
        imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
      })
      this.markerData.forEach((item) => {
        const marker = new AMap.Marker({ // 图标尺寸
          icon: icon, // 点标记图片路径
          position: item.position, // 位置
          topWhenClick: true,
          zIndex: 99999
          // offset: item.offset // 偏移
        })
        arr.push(
          Object.assign(item, {
            mapId: marker._amap_id
          })
        )
        marker.setLabel({
          direction: 'bottom',
          offset: new AMap.Pixel(0, 0), // 设置文本标注偏移量
          content: `<div class="marker_label1">${item.title}</div>` // 设置文本标注内容
        })
        marker.setMap(self.map)
        AMap.event.addListener(marker, 'click', (e) => {
          console.log('12331321')
          self.markerClick(arr, marker)
        })
      })
    },
    // 3.点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体
    markerClick (arr, marker) {
      const arrNew = arr.filter((x) => x.mapId === marker._amap_id)
      // this.$router.push({ name: 'Detailspage', params: { id: arrNew[0] } })
      this.$emit('changeMsg', true, arrNew[0])
      // this.devInfo = arrNew && arrNew[0]
      // const infoWindow = this.createInfoWindow()
      // this.openInfoWindow(infoWindow, marker)
    },
    // 4.构建自定义窗体
    createInfoWindow () {
      const infoWindowData = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: this.$refs.infoData,
        // content: this.getContent(),
        offset: new AMap.Pixel(16, -45)
      })
      return infoWindowData
    },

    // 5.打开窗体
    openInfoWindow (infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition())
      this.flash = true
    },
    // 6.关闭窗体
    closeInfoWindow () {
      // this.map.clearInfoWindow()
    }
  }
}
</script>

<style>
html,
body,
#container {
  height: 100%;
  width: 100%;
}

.amap-marker .amap-marker-label {
  background-color:transparent;/* 或者其他你想要的样式 */
  border: 0px solid #ccc;
}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  /* width: auto; */
  width: 28rem;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}
.marker_label1{
  margin: -25px 0 0 -30px;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}
.info-middle img {
  float: left;
  margin-right: 6px;
}
.map-container {
  background: rgba(0, 0, 0, 0) !important;
}
</style>
